/**
 * 积分规则页面组件
 * 展示积分系统的详细规则，包括获取方式、使用规则、等级制度等
 */
import React from 'react'
import { View, Text } from '@tarojs/components'
import pointsConfig from '../../config/pointsConfig'
import './rules.scss'

/**
 * 积分规则页面组件
 * 提供积分系统规则说明、等级介绍、使用指南等功能
 */
const PointsRules: React.FC = () => {
  return (
    <View className='points-rules'>
      {/* 积分获取规则 */}
      <View className='rules-section'>
        <View className='section-title'>积分获取</View>
        <View className='section-content'>
          <View className='rule-item'>
            <Text className='rule-name'>消费获取</Text>
            <Text className='rule-desc'>消费1元 = {pointsConfig.POINTS_EXCHANGE_RATE.MONEY_TO_POINTS}积分</Text>
          </View>
          <View className='rule-item'>
            <Text className='rule-name'>注册奖励</Text>
            <Text className='rule-desc'>{pointsConfig.POINTS_REWARDS.REGISTRATION}积分</Text>
          </View>
          <View className='rule-item'>
            <Text className='rule-name'>首单奖励</Text>
            <Text className='rule-desc'>{pointsConfig.POINTS_REWARDS.FIRST_ORDER}积分</Text>
          </View>
          <View className='rule-item'>
            <Text className='rule-name'>评价奖励</Text>
            <Text className='rule-desc'>{pointsConfig.POINTS_REWARDS.RATING}积分/次</Text>
          </View>
          <View className='rule-item'>
            <Text className='rule-name'>分享奖励</Text>
            <Text className='rule-desc'>{pointsConfig.POINTS_REWARDS.SHARING}积分/次</Text>
          </View>
          <View className='rule-item'>
            <Text className='rule-name'>连续下单</Text>
            <Text className='rule-desc'>{pointsConfig.POINTS_REWARDS.CONSECUTIVE_ORDER}积分/天</Text>
          </View>
        </View>
      </View>

      {/* 积分使用规则 */}
      <View className='rules-section'>
        <View className='section-title'>积分使用</View>
        <View className='section-content'>
          <View className='rule-item'>
            <Text className='rule-name'>积分抵扣</Text>
            <Text className='rule-desc'>{Math.round(1/pointsConfig.POINTS_EXCHANGE_RATE.POINTS_TO_MONEY)}积分 = 1元</Text>
          </View>
          <View className='rule-item'>
            <Text className='rule-name'>最低使用</Text>
            <Text className='rule-desc'>单次最低使用{pointsConfig.POINTS_USAGE_LIMITS.MIN_POINTS_TO_USE}积分</Text>
          </View>
          <View className='rule-item'>
            <Text className='rule-name'>使用规则</Text>
            <Text className='rule-desc'>积分必须以{pointsConfig.POINTS_USAGE_LIMITS.POINTS_USE_MULTIPLE}的倍数使用</Text>
          </View>
          <View className='rule-item'>
            <Text className='rule-name'>最大抵扣</Text>
            <Text className='rule-desc'>最多抵扣订单金额的{pointsConfig.POINTS_USAGE_LIMITS.MAX_DISCOUNT_PERCENTAGE * 100}%</Text>
          </View>
        </View>
      </View>

      {/* 会员等级说明 */}
      <View className='rules-section'>
        <View className='section-title'>会员等级</View>
        <View className='section-content'>
          {pointsConfig.MEMBER_LEVELS.map((level, index) => (
            <View key={index} className='level-item'>
              <View className='level-header'>
                <Text className='level-name'>{level.name}</Text>
                <Text className='level-threshold'>累计{level.minPoints}积分</Text>
              </View>
              <View className='level-benefits'>
                <Text className='benefit-title'>等级特权：</Text>
                <View className='benefits-list'>
                  <Text className='benefit-item'>积分倍率：{level.pointsMultiplier}x</Text>
                  {level.benefits.map((benefit, i) => (
                    <Text key={i} className='benefit-item'>{benefit}</Text>
                  ))}
                </View>
                {pointsConfig.POINTS_EXPIRATION.ENABLED && (
                  <Text className='expiration-info'>
                    积分有效期：
                    {pointsConfig.POINTS_EXPIRATION.LEVEL_EXPIRATION[level.level] === -1 
                      ? '永久有效' 
                      : `${pointsConfig.POINTS_EXPIRATION.LEVEL_EXPIRATION[level.level]}天`}
                  </Text>
                )}
              </View>
            </View>
          ))}
        </View>
      </View>

      {/* 积分有效期说明 */}
      <View className='rules-section'>
        <View className='section-title'>积分有效期</View>
        <View className='section-content'>
          {pointsConfig.POINTS_EXPIRATION.ENABLED ? (
            <View className='rule-item'>
              <Text className='rule-name'>默认有效期</Text>
              <Text className='rule-desc'>{pointsConfig.POINTS_EXPIRATION.VALIDITY_DAYS}天</Text>
            </View>
          ) : (
            <View className='rule-item'>
              <Text className='rule-desc'>当前积分永久有效</Text>
            </View>
          )}
          <View className='rule-item'>
            <Text className='rule-desc'>注：不同会员等级积分有效期不同，详见会员等级说明</Text>
          </View>
        </View>
      </View>

      {/* 页面底部说明 */}
      <View className='rules-footer'>
        <Text>积分规则最终解释权归本店所有</Text>
      </View>
    </View>
  )
}

export default PointsRules 